<template>
    <!-- 通用搜索 -->
    <transition name="el-zoom-in-bottom" mode="out-in">
        <ComSearch v-show="props.buttons.includes('comSearch') && aaTable.table.showComSearch">
            <template v-for="(slot, idx) in $slots" :key="idx" #[idx]>
                <slot :name="idx"></slot>
            </template>
        </ComSearch>
    </transition>
    <div class="aa-table-header">
        <!-- 左侧操作按钮组 [刷新，添加，编辑，删除，展开/收缩] -->
        <div class="operation-button">
            <el-tooltip v-if="props.buttons.includes('refresh')" content="刷新" placement="top">
                <el-button @click="onAction('refresh', { loading: true })" color="#40485b" class="table-header-operate" type="info">
                    <Icon name="fa fa-refresh" color="#fff" />
                </el-button>
            </el-tooltip>
            <el-tooltip v-if="props.buttons.includes('add')" content="添加" placement="top">
                <el-button @click="onAction('add')" class="table-header-operate" type="primary">
                    <Icon name="fa fa-plus" color="#fff" />
                    <span class="table-header-operate-text">添加</span>
                </el-button>
            </el-tooltip>
            <el-tooltip v-if="props.buttons.includes('edit')" content="编辑选中行" placement="top">
                <el-button @click="onAction('edit')" :disabled="!enableBatchOpt" class="table-header-operate" type="primary">
                    <Icon name="fa fa-pencil" color="#fff" />
                    <span class="table-header-operate-text">编辑</span>
                </el-button>
            </el-tooltip>
            <el-popconfirm
                v-if="props.buttons.includes('delete')"
                @confirm="onAction('delete')"
                confirm-button-text="删除"
                cancel-button-text="取消"
                confirmButtonType="danger"
                title="确定删除选中数据吗？"
                :disabled="!enableBatchOpt"
            >
                <template #reference>
                    <div class="mlr-12">
                        <el-tooltip content="删除选中行" placement="top">
                            <el-button :disabled="!enableBatchOpt" class="table-header-operate" type="danger">
                                <Icon name="fa fa-trash" color="#fff" />
                                <span class="table-header-operate-text">删除</span>
                            </el-button>
                        </el-tooltip>
                    </div>
                </template>
            </el-popconfirm>
            <el-tooltip
                v-if="props.buttons.includes('unfold')"
                :content="aaTable.table.expandAll ? '收缩所有子菜单' : '展开所有子菜单'"
                placement="top"
            >
                <el-button
                    @click="aaTable.onTableHeaderAction('unfold', { unfold: !aaTable.table.expandAll })"
                    class="table-header-operate"
                    :type="aaTable.table.expandAll ? 'danger' : 'warning'"
                >
                    <span class="table-header-operate-text">{{ aaTable.table.expandAll ? '收缩所有' : '展开所有' }}</span>
                </el-button>
            </el-tooltip>
            <slot name="leftAppend"></slot>
        </div>
        <!-- 右侧 显示 和 搜索 -->
        <div class="table-search">
            <el-input
                v-if="props.buttons.includes('quickSearch')"
                v-model="aaTable.table.filter!.quickSearch"
                class="xs-hidden quick-search"
                @input="onSearchInput"
                :placeholder="quickSearchPlaceholder"
                clearable
            />
            <div class="table-search-group">
                <el-dropdown v-if="props.buttons.includes('columnDisplay')" :max-height="380" :hide-on-click="false">
                    <el-button
                        class="table-search-button-item"
                        :class="props.buttons.includes('comSearch') ? 'right-border' : ''"
                        color="#dcdfe6"
                        plain
                    >
                        <Icon size="14" name="el-icon-Grid" />
                    </el-button>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item v-for="(item, idx) in columnDisplay" :key="idx">
                                <el-checkbox
                                    v-if="item.prop"
                                    @change="onChangeShowColumn($event, item.prop!)"
                                    :checked="!item.show"
                                    :model-value="item.show"
                                    size="small"
                                    :label="item.label"
                                />
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
                <el-tooltip v-if="props.buttons.includes('comSearch')" :disabled="aaTable.table.showComSearch" content="展开通用搜索" placement="top">
                    <el-button
                        class="table-search-button-item"
                        @click="aaTable.table.showComSearch = !aaTable.table.showComSearch"
                        color="#dcdfe6"
                        plain
                    >
                        <Icon size="14" name="el-icon-Search" />
                    </el-button>
                </el-tooltip>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import ComSearch from '/@/components/table/comSearch/index.vue'
import { debounce } from 'lodash-es'
import { computed, inject } from 'vue'
import aaTableClass from '/@/utils/aaTable'

interface Props {
    buttons?: TableHeaderActionEvent[]
    quickSearchPlaceholder?: string
}
const props = withDefaults(defineProps<Props>(), {
    buttons: () => ['refresh', 'add', 'edit', 'delete'],
    quickSearchPlaceholder: '',
})

const enableBatchOpt = computed(() => (aaTable.table.selection!.length > 0 ? true : false))
// 返回表格列显示字段
const columnDisplay = computed(() => {
    let columnDisplayArr = []
    for (let item of aaTable.table.column) {
        item.type === 'selection' || item.render === 'buttons' || item.enableColumnDisplayControl === false ? '' : columnDisplayArr.push(item)
    }
    return columnDisplayArr
})

const aaTable = inject('aaTable') as aaTableClass

const onAction = (eventType: TableHeaderActionEvent, data: anyObj = {}) => {
    aaTable.onTableHeaderAction(eventType, data)
}
const onSearchInput = debounce(() => {
    aaTable.onTableHeaderAction('quickSearch', { keyword: aaTable.table.filter!.quickSearch })
}, 500)

const onChangeShowColumn = (value: string | number | boolean, field: string) => {
    aaTable.onTableHeaderAction('columnDisplay', { field: field, value: value })
}
</script>

<style lang="scss" scoped>
.aa-table-header {
    display: flex;
    background-color: #fff;
    border: 1px solid #ebeef5;
    border-bottom: none;
    padding: 13px 15px;
    font-size: 14px;
    align-items: center;
    .operation-button {
        position: relative;
        overflow-x: auto;
        box-sizing: border-box;
        display: flex;
        max-width: 100%;
        .table-header-operate {
            .table-header-operate-text {
                margin-left: 6px;
            }
        }
    }
    .table-search {
        display: flex;
        margin-left: auto;
        .quick-search {
            width: auto;
        }
        .table-search-group {
            display: flex;
            overflow: hidden;
            margin-left: 12px;
            border: 1px solid var(--el-border-color);
            border-radius: var(--el-border-radius-base);
            button:focus,
            button:active {
                background-color: #fff;
            }
            button:hover {
                background-color: var(--el-color-info-light-7);
            }
            .table-search-button-item {
                height: 30px;
                border: none;
                border-radius: 0;
            }
            .el-button + .el-button {
                margin: 0;
            }
            .right-border {
                border-right: 1px solid var(--el-border-color);
            }
        }
    }
}
.mlr-12 {
    margin-left: 12px;
}
.mlr-12 + .el-button {
    margin-left: 12px;
}
</style>
